<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :model="form"
    >
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick"
      >
        <a-tab-pane key="password" tab="账号密码登录">
          <LoginPassword ref="LoginPasswordRef"></LoginPassword>
        </a-tab-pane>
        <a-tab-pane key="mobile" tab="手机号登录">
          <LoginMobile ref="LoginMobileRef"></LoginMobile>
        </a-tab-pane>
      </a-tabs>

      <a-form-item>
        <a-checkbox v-model:checked="rememberMe">自动登录</a-checkbox>
        <!-- <router-link
          :to="{ name: '登陆' }"
          class="forge-password"
          style="float: right;"
          >忘记密码</router-link
        > -->
      </a-form-item>

      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          class="login-button"
          @click="handleSubmit()"
          :loading="loginBtn"
          :disabled="loginBtn"
          >确定</a-button
        >
      </a-form-item>

      <div class="user-login-other">
        <router-link class="register" :to="{ name: '注册' }"
          >注册账户</router-link
        >
      </div>
    </a-form>
  </div>
</template>
<script lang="ts">
import LoginPassword, { LoginPasswordRefs } from "./Password.vue";
import LoginMobile, { LoginMobileRefs } from "./Mobile.vue";
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  components: {
    LoginPassword,
    LoginMobile,
  },
  setup() {
    // refs
    const LoginPasswordRef = ref<LoginPasswordRefs>();
    const LoginMobileRef = ref<LoginMobileRefs>();
    // ref
    const customActiveKey = ref("password");
    const rememberMe = ref(false);
    const loginBtn = ref(false);
    // reactive
    const form = reactive({
      username: "",
      mobile: "",
      password: "",
      code: "",
    });
    // methods
    const handleTabClick = (key: string) => {
      customActiveKey.value = key;
    };
    const handleSubmit = () => {
      switch (customActiveKey.value) {
        case "password":
          LoginPasswordRef.value?.submitForm();
          break;
        case "mobile":
          LoginMobileRef.value?.submitForm();
      }
    };
    // return
    return {
      // refs
      LoginMobileRef,
      LoginPasswordRef,
      //ref
      customActiveKey,
      rememberMe,
      loginBtn,
      // reactive
      form,
      // methods
      handleTabClick,
      handleSubmit,
    };
  },
});
</script>


<style lang="scss" scoped>
.main ::v-deep(.ant-tabs-tabpane) {
  padding: 0 5px;
}
.main ::v-deep(.ant-form-item-control-wrapper) {
  width: 100%;
}
.user-layout-login {
  label {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;
    .register {
      float: right;
    }
  }
}
</style>
